<template>
   <div class="container">

      <div class="container_item">
         <div class="container_top">
            <div :class="{ active: filters == 1, 'filter_item': true }" @click="onFiltrate(1)">
               <div>
                  <el-image :src="all"></el-image>
               </div>
               <div class="filter_title">
                  <div style="color: #3DE6FF;">{{ amount }}<span>台</span></div>
                  <div>{{ planeMode ? '已标记设备' : '全部设备' }}</div>
               </div>
            </div>
            <div :class="{ active: filters == 5, 'filter_item': true }" @click="onFiltrate(5)">
               <div>
                  <el-image :src="normal"></el-image>
               </div>
               <div class="filter_title">
                  <div style="color: #00FFC4;">{{ onlineNum }}<span>台</span></div>
                  <div>在线</div>
               </div>
            </div>
            <div :class="{ active: filters == 4, 'filter_item': true }" @click="onFiltrate(4)">
               <div>
                  <el-image :src="offline"></el-image>
               </div>
               <div class="filter_title">
                  <div style="color: #90a4ae;">{{ offlinenum }}<span>台</span></div>
                  <div>离线</div>
               </div>
            </div>
            <div :class="{ active: filters == 3, 'filter_item': true }" @click="onFiltrate(3)">
               <div>
                  <el-image :src="alarm"></el-image>
               </div>
               <div class="filter_title">
                  <div style="color: red">{{ alarmnum }}<span>台</span></div>
                  <div>告警</div>
               </div>
            </div>
         </div>

         <div class="caritem" @click.stop="hidePop" v-if="planeMode">
            <div class="caritem_div" v-if="ichnographyImg">
               <div class="div_box" :style="{ transform: `scale(${scale}) `, left: `${x}px`, top: `${y}px` }"
                  @wheel="handleWheel" @mousedown.stop="handleMouseDown" @mousemove="handleMouseMove"
                  @mouseup="handleMouseUp">
                  <img class="elImage" :src="ichnographyImg" ref="imgDiv" @mousedown.prevent>

                  <div class="device" :style="'top:' + item.top + 'px;' + 'left:' + item.left + 'px;'"
                     v-for="item in markVOList" :key="item.id">
                     <i class="icon" :class="iconclass(item)"></i>
                     <div class="pop-up">
                        <div style="margin-bottom: 5px">
                           设备编码：{{ item.imei }}
                        </div>
                        <div style="margin-bottom: 5px">产品类型：{{ item.productName }}</div>
                        <div style="margin-bottom: 5px">产品型号：{{ item.classMark }}</div>
                        <div style="margin-bottom: 5px">设备状态：{{ item.online == 0 ? '离线' : '在线' }}</div>
                        <div>告警状态：{{ item.isAlarm == 0 ? '正常' : '告警' }}</div>
                     </div>
                  </div>
                  
               </div>
            </div>
            <div v-else-if="floorId" style="
                  height: 90%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
               ">
               <el-upload class="upload-demo" drag :action="baseUrl" :headers="headers" accept=".jpg,.png"
                  :file-list="fileList" :before-upload="beforeAvatarUpload" :on-success="handleSuccessFunction">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text"><em>点击上传</em>平面图</div>
               </el-upload>
            </div>

            <div v-else style="
                  height: 90%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
               ">
               <img :src="wugj" style="width: 120px; height: 120px; margin-bottom: 10px">
               <div>暂无楼层</div>
            </div>

         </div>

         <div class="content" v-else v-loading="loadingData" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="content" style="padding-left: 0;" v-if="deviceList.length > 0">
               <div class="item-content" v-for="item in deviceList" :key="item.id">
                  <div class="model_box1">
                     <div>
                        <img :src="getSrc(item)" alt="">
                     </div>
                     <div>
                        <div class="model_box1_titel">{{ item.productName }}</div>
                        <div class="model_box2_titel">{{ datav.buildingsArr.address }}{{ datav.orgarr.orgName }}{{
                           datav.buildingsArr.name }}{{ floorName }}{{ datav.spacesArr.name }}</div>
                     </div>
                  </div>
                  <div class="model_box2">
                     <div style="display: flex;align-items: center;">电量：
                        <span v-if="item.batteryValue === '' || item.batteryValue == null">-</span>
                        <span v-else-if="item.batteryValue >= 30" style="color: #28c76f;">{{ item.batteryValue }}</span>
                        <span v-else style="color: #ea5455;">{{ item.batteryValue }}</span>
                     </div>
                     <!-- <div>信号：
                        <span v-if="item.signalValue == 0">优</span>
                        <span v-else-if="item.signalValue == 1">良</span>
                        <span v-else-if="item.signalValue == 2">差</span>
                        <span v-else-if="item.signalValue == '' || item.signalValue == null">-</span>
                        <span v-else>优</span>
                     </div> -->
                     <div style="display: flex;align-items: center;">状态：
                        <span v-if="item.online == 0" style="color: #ea5455;">离线</span>
                        <span v-else style="color: #28c76f;">在线</span>
                     </div>
                     <div style="display: flex;align-items: center;">告警状态：
                        <span v-if="item.isAlarm == 0" style="color: #28c76f;">正常</span>
                        <span v-else style="color: #ea5455;">告警</span>
                     </div>
                  </div>
                  <div class="model_box3" @click="updateMark(item)">
                     <div v-if="item.mark != ''"><i class="el-icon-success"
                           style="color: #28c76f;cursor: pointer;"></i>已标记</div>
                     <div v-else><i class="el-icon-error" style="color: #F84242;cursor: pointer;"></i>未标记</div>
                  </div>
               </div>
            </div>
            <div v-if="deviceList.length <= 0 && !loadingData" style="
                  width: 100%;
                  height: 90%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  align-content: center;
                  margin-top: 1.5%;
               ">
               <img :src="wugj" style="width: 120px; height: 120px; margin-bottom: 10px">
               <div>暂无数据</div>
            </div>
         </div>

         <!-- 平面图分页 -->
         <div class="paging" v-if="planeMode && total > 0">
            <pagination :total="total" :page.sync="page2" :limit.sync="limit2" @pagination="getGetMark"
               class="pagination" layout="prev, pager, next" />
         </div>

         <!-- 设备列表分页 -->
         <div class="paging" v-if="!planeMode && total > 0">
            <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="getDataList"
               class="pagination" layout="prev, pager, next" />
         </div>
         <div class="modeTab">
            <div :class="{ active: planeMode, 'modeBtn': true }" @click="onplane">平面模式</div>
            <div :class="{ active: !planeMode, 'modeBtn': true }" @click="onlist">列表模式</div>
         </div>
      </div>

      <!-- 楼层列表 -->
      <div class="floor">
         <floorList ref="refFloorList" @getFloorName="getFloorName"></floorList>
      </div>
      <Ichnography ref="refIchnography" :editId="editId"></Ichnography>
   </div>
</template>

<script>
import floorList from './floorList'
import { mapState, mapMutations } from "vuex";
import {
   reqDeviceBySpaceId,
   reqProductList,
   reqDeviceList,
   reqImagePage,
   reqGetMark,
   reqImageBatchUpdate,
   reqFloorById
} from "@/api/api";
import { reqHandlingStatusCount } from "@api/apiDatav.js";
import Pagination from "@components/Pagination.vue";
import asc from "@utils/asc.js"; //加密解密
import Ichnography from "./Ichnography.vue"

export default {
   components: {
      floorList,
      Pagination,
      Ichnography
   },
   data() {
      return {
         headers: {
            token: asc.decrypt(sessionStorage.getItem("token")),
         },
         fileList: [],
         wugj: require("@assets/images/datav/wugj.png"),
         status1: 0,
         status2: 0,
         sum: 0,
         floorId: "",

         filters: "1",
         deviceList: [],
         tableData: [],
         floorName: "",
         isAlarm: "",
         online: "",
         amount: 0,
         alarmnum: 0,
         offlinenum: 0,
         onlineNum: 0,
         normalnum: 0,
         loadingData: false,

         page: 1,
         limit: 6,
         total: 0,

         page2: 1,
         limit2: 10,
         total2: 0,

         infinitescroll: false,
         noMore: false,

         all: require("@assets/images/datavDetails/all.png"),
         alarm: require("@assets/images/datavDetails/alarm.png"),
         normal: require("@assets/images/datavDetails/normal.png"),
         offline: require("@assets/images/datavDetails/off-line.png"),
         planeMode: true,//平面||列表

         // 平面模式
         // 放大缩小
         scale: 1, // 初始缩放比例为1
         scaleStep: 0.1, // 每次滚动缩放的步长
         // 鼠标拖动
         x: 0, // div的初始x坐标
         y: 0, // div的初始y坐标
         dragging: false, // 是否正在拖动
         startX: 0, // 鼠标按下时的x坐标
         startY: 0, // 鼠标按下时的y坐标
         popstr: "", //弹窗显示隐藏 // 用于存储当前显示的 pop-up 的 id
         markVOList: [],
         markVOListArr: [],
         // ichnographyImg: require("@assets/images/xiaofang.png"),
         ichnographyImg: require("@assets/images/xiaofang.png"),
         editId: "",
      }
   },
   computed: {
      ...mapState(["user", "datav"]),
   },
   watch: {
      // async "datav.spacesFlag"(e) {
      // console.log(e);
      // // console.log(this.datav.floorId);
      // await this.ProductList()
      // if (this.datav.floorId == 1) {
      //    //为1选择全部楼层
      //    this.getclear()
      //    await this.getDataList()
      //    return;
      // }
      // this.status1 = 0;
      // this.status2 = 0;
      // this.sum = 0;
      // // 检查是否等于一个空对象 {}
      // if (Object.keys(this.datav.spacesArr).length == 0) {
      //    this.deviceList = []
      //    return;
      // }
      // // await this.getDeviceBySpaceId()
      // this.getHandlingStatusCount()
      // }
   },
   async mounted() {
   },
   async activated() {
   },
   methods: {
      onplane() {
         this.planeMode = true;
         if (this.floorId == '') return;//没有楼层
         this.initialize()//平面图初始化
         this.getGetMark()//获取平面图设备标点
      },
      async onlist() {
         this.planeMode = false;
         if (this.floorId == '') return;//没有楼层
         this.getclear()//清空
         this.loadingData = true;
         await this.getDataList()// 获取设备列表
         this.loadingData = false;
         this.getGetMark()//获取平面图设备标点
      },
      // 筛选
      async onFiltrate(e) {
         this.filters = e
         if (this.floorId == '') return;
         if (e == 1) {
            this.isAlarm = ''
            this.online = ''
         } else if (e == 2) {
            this.isAlarm = 0;
            this.online = ''
         } else if (e == 3) {
            // 告警
            this.isAlarm = 1;
            this.online = ''
         } else if (e == 4) {
            // 离线
            this.isAlarm = ''
            this.online = 0;
         } else if (e == 5) {
            // 在线
            this.isAlarm = ''
            this.online = 1;
         }
         if (!this.planeMode) {
            this.loadingData = true;
            await this.getDataList()// 获取设备列表
            this.loadingData = false;
         }
         this.getGetMark()//获取平面图设备标点
      },
      // 子传父
      async getFloorName(e) {
         // console.log(e);
         if (e == null || e == '') {
            // 没有楼层的情况
            this.ichnographyImg = '';
            this.markVOList = []
            this.alarmnum = 0;
            this.offlinenum = 0;
            this.onlineNum = 0;
            this.normalnum = 0;
            this.amount = 0;//全部
            this.total = 0;
            return;
         }
         this.floorName = e.name;//楼层名称
         this.floorId = e.id//楼层id
         this.getclear()//清空
         this.loadingData = true;
         this.initialize()//平面图初始化
         this.getImagePage()//平面图 图片
         this.getGetMark()//获取平面图设备标点
         await this.ProductList()//产品列表
         await this.getDataList()// 获取设备列表
         this.loadingData = false;
      },
      // 获取设备列表
      async getDataList() {
         const res = await reqDeviceList(this.page, this.limit, {
            userId: this.user.userId,
            roleName: this.user.roleName,
            tenantId: this.user.tenantId,
            buildingId: this.datav.buildingsArr.id,
            floorId: this.floorId,
            isAlarm: this.isAlarm,
            online: this.online
         });
         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         // console.log(res);
         this.total = res.data.total;
         this.deviceList = res.data.rows;
      },
      // 告警处理统计
      async getHandlingStatusCount() {
         let res = await reqHandlingStatusCount({
            tenantId: this.user.tenantId,
            orgId: '',
            spaceId: this.datav.spacesArr.id,//安装点id
            roleName: this.user.roleName,
            userId: this.user.userId,
         });
         // console.log(res);
         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         res.data.row.forEach(item => {
            if (item.status == '1') {
               this.status1 = item.count;
            }
            if (item.status == '2') {
               this.status2 = item.count;
            }
            // if (item.status == '3') {
            //     this.status3 = item.count;
            // }
            this.sum += item.count
         })
      },
      // 动态返回设备图片
      getSrc(e) {
         // console.log(this.tableData,e);
         let pic;
         this.tableData.forEach(item => {
            if (item.deviceType == e.deviceType) {
               pic = item.pic
               return
            }
         })
         return pic
         // return 'https://tagan.oss-cn-shenzhen.aliyuncs.com/2023/03/22/af8c52cd97304c1cb08030e91dc383a1Frame 427319099@2x.png'
      },
      // 产品列表
      async ProductList() {
         let res = await reqProductList();
         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         this.tableData = res.data.rows;
      },
      // 空间id获取安装设备
      // async getDeviceBySpaceId() {
      //    let res = await reqDeviceBySpaceId(this.datav.spacesArr.id);
      //    if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //    // console.log(res);
      //    this.deviceList = res.data.rows || [];
      // },

      //回到初始状态
      getclear() {
         this.deviceList = []
         this.page = 1
         this.limit = 6
      },
      //点击 返回 回到初始状态
      getclear2() {
         this.deviceList = []
         this.page = 1
         this.limit = 6

         this.page2 = 1
         this.limit2 = 10

         this.floorId = ''//楼层id
         this.ichnographyImg = require("@assets/images/xiaofang.png")
      },
      // 平面模式
      hidePop() {
         this.popstr = ''; // 隐藏所有 pop-up
      },
      // 鼠标拖动
      handleMouseDown(event) {
         this.dragging = true;
         this.startX = event.clientX - this.x;
         this.startY = event.clientY - this.y;
      },
      handleMouseMove(event) {
         if (!this.dragging) return;
         this.x = event.clientX - this.startX;
         this.y = event.clientY - this.startY;
      },
      handleMouseUp() {
         this.dragging = false;
      },
      // 放大缩小
      handleWheel(event) {
         event.preventDefault(); // 阻止默认事件，防止页面滚动
         const delta = event.deltaY * -1; // 获取滚轮滚动的方向
         this.scale += delta > 0 ? this.scaleStep : -this.scaleStep; // 根据滚动方向调整缩放比例
         // 限制缩放比例的范围，防止过大或过小
         this.scale = Math.min(Math.max(0.1, this.scale), 5);
      },
      //弹窗显示隐藏
      clickIcon(id) {
         if (this.popstr == id) {
            this.popstr = "";
            return;
         }
         this.popstr = id;
      },
      clickPop(event) {
         event.stopPropagation(); // 阻止 click 事件冒泡到父元素
      },
      // 标记点颜色
      // iconclass(e) {
      //    // console.log(e);
      //    if (e.isAlarm == 1) {
      //       return "hon";
      //    }
      //    if (e.online == 0) {
      //       return "lixian";
      //    }
      // },
      // 标记点图片
      iconclass(e) {
         // console.log(e);
         let pic = 'iconfont shebeiguanli2'
         if (e.productName == '门磁') {
            pic = 'iconfont menci'
         } else if (e.productName == '烟感探测报警器') {
            pic = 'iconfont yangan'
         } else if (e.productName == '红外探测器') {
            pic = 'iconfont rentihongwai'
         } else if (e.productName == '智能燃气报警器') {
            pic = 'iconfont reshuiqi'
         }
         return pic
      },
      //获取平面图设备标点
      async getGetMark() {
         const res = await reqGetMark(this.page2, this.limit2, {
            floorId: this.floorId,
            isMark: this.planeMode ? '2' : '1'
         });
         // console.log(res);
         this.total2 = 0
         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         this.total2 = res.data.row.count || 0
         this.markVOListArr = res.data.row.markVOList || [];
         if (this.markVOListArr.length == 0) {
            this.markVOList = []
            this.alarmnum = 0;
            this.offlinenum = 0;
            this.onlineNum = 0;
            this.normalnum = 0;
            this.amount = 0;//全部
            return
         };
         this.alarmnum = res.data.row.deviceStatisticsVO.alarm;//告警
         this.offlinenum = res.data.row.deviceStatisticsVO.offline;//离线
         this.onlineNum = res.data.row.deviceStatisticsVO.online;//在线
         this.normalnum = (res.data.row.deviceStatisticsVO.online + res.data.row.deviceStatisticsVO.offline) - this.alarmnum;//正常
         this.amount = this.offlinenum + res.data.row.deviceStatisticsVO.online;
         // this.markVOList = this.markVOList.filter((item) => item.mark != "");
         this.markVOListArr = this.markVOListArr.filter((item) => item.mark != "");

         this.markVOList = this.markVOListArr.filter((item) => {
            if (this.filters == 2) {
               // 正常
               return item.isAlarm == 0
            } else if (this.filters == 3) {
               // 告警
               return item.isAlarm == 1
            } else if (this.filters == 4) {
               // 离线
               return item.online == 0
            } else if (this.filters == 5) {
               // 在线
               return item.online == 1
            } else {
               return item
            }
         });

         this.markVOList.forEach((item) => {
            item.left = item.mark.slice(0, item.mark.indexOf(","));
            item.top = item.mark.slice(item.mark.indexOf(",") + 1);
         });

      },
      //查询平面图
      async getImagePage() {
         const res = await reqImagePage(1, 2, {
            spaceId: this.datav.buildingsArr.id,
            floorId: this.floorId
         });
         //   console.log(res);
         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         this.ichnographyImg = res.data.rows[0].image;
      },
      //   平面图初始化
      initialize() {
         this.popstr = "";
         this.scale = 1 // 初始缩放比例为1
         this.scaleStep = 0.1 // 每次滚动缩放的步长
         this.x = 0// div的初始x坐标
         this.y = 0 // div的初始y坐标
         this.dragging = false // 是否正在拖动
         this.startX = 0 // 鼠标按下时的x坐标
         this.startY = 0 // 鼠标按下时的y坐标
      },

      // 平面图上传操作开始
      // 上传文件之前的钩子
      beforeAvatarUpload(file) {
         let isJPG = true;
         let isLt = file.size / 1024 < 20000; // 判断是否小于500Kb
         if (file.type !== "image/png" && file.type !== "image/jpeg") {
            this.$modal.notifyWarning("图片只能是 jpg/png 格式!");
            isJPG = false;
            return isJPG;
         } else if (!isLt) {
            this.$modal.notifyWarning("图片大小不能超过20MB! 请重新上传");
            isJPG = false;
         }
         return isJPG;
      },
      // 上传成功
      handleSuccessFunction(response, file, fileList) {
         this.image = file.response.data.url;
         this.addSubmit()
      },
      async addSubmit() {
         const res = await reqImageBatchUpdate({
            idList: [this.floorId],
            image: this.image
         });
         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         this.$modal.notifySuccess("上传成功！");
         this.fileList = []
         this.getImagePage()  //查询平面图
      },
      // 修改标记点
      async updateMark(e) {
         // console.log(e);
         this.editId = e.id
         // 获取平面图 图片
         const res = await reqFloorById(e.spaceId);
         // console.log(res);
         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         if (res.data.rows.image == '') return this.$modal.notifyWarning('当前楼层暂无平面图,请上传后操作!');
         this.$refs.refIchnography.getimage(res.data.rows.image)
         this.$refs.refIchnography.dialogVisible = true;
         if (e.mark != '') {
            this.$refs.refIchnography.getMark(e.mark)
         }
      },
   },
   created() {
      this.baseUrl = `${this.$baseURL_copy}file/upload`;
   },
}
</script>

<style lang='less' scoped>
.container {
   height: 100%;
   width: 100%;
   display: flex;
   color: #fff;
   .fontSize(12);

   .alarm {
      .width(170);
      .fontSize(14);
      padding-top: 3.2%;
      padding-left: 25px;
      box-sizing: border-box;

      >div {
         display: flex;
         flex-direction: column;
         margin-bottom: 16%;

         >div:last-of-type {
            .fontSize(30);
            margin-top: 8px;
         }
      }

      .item_title {
         position: relative;
         padding-left: 15px;
      }

      .item_title::before {
         content: "";
         position: absolute;
         width: 8px !important;
         height: 8px !important;
         top: 55% !important;
         transform: translateY(-50%);
         left: -5%;
         border-radius: 8px !important;
         left: 0px;
         background-color: #03E3EE;
      }

      .item_title2::before {
         background-color: #FC5853;
      }

      .item_title3::before {
         background-color: #00F8D8;
      }
   }

   .container_item {
      padding: 10px 0 10px 10px;
      box-sizing: border-box;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .container_top {
         width: 100%;
         display: flex;
         justify-content: space-between;
         padding: 4.5vh 0 5vh 2%;
         box-sizing: border-box;

         .filter_item {
            box-sizing: border-box;
            background: #0D2A8C;
            padding: 1vw 0;
            width: 20%;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;

            .el-image {
               width: 3.5vw;
            }

            .filter_title {
               margin-left: 20px;
               .fontSize(16);
               display: flex;
               flex-direction: column;
               align-items: flex-start;

               >div {
                  margin-bottom: 6px;
               }

               >div:first-of-type {
                  .fontSize(28);

                  >span {
                     .fontSize(15);
                     margin-left: 8px;
                  }
               }
            }
         }

         .active {
            background: #114683;
            border: 2px solid #01EAFC;
            box-shadow: inset 0 0 10px rgba(1, 234, 252, 1);
         }
      }

      .modeTab {
         display: flex;
         margin-bottom: 10px;

         .modeBtn {
            .fontSize(14);
            padding: 0.4vw 1.5vw;
            border-radius: 5px;
            margin: 0 15px;
            border: 1px solid #01EAFC;
            background: #091D7A;
            cursor: pointer;
         }

         .active {
            background: #114683;
            border: 1px solid #01EAFC;
            color: #01EAFC;
            box-shadow: inset 0 0 3px rgba(1, 234, 252, 1);
         }
      }

      // 分页器
      .paging {
         width: 100%;

         ::v-deep .el-pagination {
            background: transparent;
         }

         ::v-deep .el-pager {
            background: transparent !important;
         }

         ::v-deep .el-pager li {
            border-radius: 30px;
            background: #0D2A8C !important;
            color: #fff;
         }

         ::v-deep .el-pager li.active {
            // background: #01EAFC !important;
            background: #114683 !important;
            border: 1px solid #01EAFC;
            box-sizing: border-box;
            color: #01EAFC;
            box-shadow: inset 0 0 2px rgba(1, 234, 252, 1);
         }

         ::v-deep .el-pagination .btn-prev {
            background: #0D2A8C;
         }

         ::v-deep .btn-prev .el-icon {
            color: #fff;
         }

         ::v-deep .el-pagination .btn-next {
            background: #0D2A8C;
         }

         ::v-deep .btn-next .el-icon {
            color: #fff;
         }
      }


      .content {
         width: 100%;
         height: 57%;
         // flex: 1;
         // height: calc(100% - 60px); //这样设置才能触发加载
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
         align-content: flex-start;
         padding-left: 2%;
         // padding: 50px 0 50px 50px;
         box-sizing: border-box;

         .item-content {
            margin-right: 1.27vw;
            margin-bottom: 3vh;
            width: 32%;
            background-color: #0C2A8D;
            height: 21vh;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            border-radius: 4px;
            position: relative;

            >.model_box1 {
               flex: 2;
               display: flex;
               justify-content: center;
               align-items: center;

               >div:first-of-type {
                  flex: 1;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  img {
                     width: 56%;
                  }
               }

               >div:last-of-type {
                  flex: 2;

                  .model_box1_titel {
                     font-weight: 600;
                     .fontSize(18);
                  }

                  .model_box2_titel {
                     color: #DCDCDC;
                     margin-top: 2vh;
                     .fontSize(15);
                  }
               }
            }

            >.model_box2 {
               .fontSize(14);
               flex: 1;
               display: flex;
               justify-content: center;
               align-items: center;
               color: #DCDCDC;

               >div {
                  flex: 1;
                  display: flex;
                  justify-content: center;
               }
            }

            >.model_box3 {
               .fontSize(14);
               position: absolute;
               right: 10px;
               top: 5px;
               cursor: pointer;

               i {
                  margin-right: 2px;
               }
            }
         }

         .item-content:nth-child(3n) {
            margin-right: 0px;
         }
      }

      .caritem {
         width: 98%;
         height: 65%;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
         overflow: hidden;
         margin-left: 2%;
         margin-bottom: 10px;
         box-sizing: border-box;

         .caritem_div {
            width: 800px;
            height: 450px;
            position: relative;
         }

         .div_box {
            margin: 0 auto;
            width: 800px;
            height: 450px;
            position: absolute;
            cursor: move;

            .elImage {
               width: 100%;
               height: 100%;
            }

            .icon {
               position: absolute;
               // color: #28c76f;
               border-radius: 50%;
               font-size: 20px;
               width: 34px;
               height: 34px;
               background-color: #7367F0;
               color: #fff;
               display: flex;
               justify-content: center;
               align-items: center;
               cursor: pointer;

               // .pop-up {
               //    position: absolute;
               //    bottom: 50px;
               //    left: 50%;
               //    transform: translate(-50%, 0);
               //    background: rgba(115, 103, 240, 0.9);
               //    width: 250px;
               //    padding: 8px 10px;
               //    border-radius: 5px;
               //    font-size: 14px;
               //    color: #fff;
               //    z-index: 9999;
               //    opacity: 0;
               //    visibility: hidden;
               //    transition: all 0.2s ease-in;
               //    cursor: text;

               //    // 向下小箭头
               //    &:after {
               //       content: "";
               //       border: 8px solid transparent;
               //       border-top-color: rgba(115, 103, 240, 0.9);
               //       position: absolute;
               //       bottom: -15px;
               //       left: 50%;
               //       transform: translate(-50%, 0);
               //    }
               // }
            }

            .device {
               position: absolute;
               width: 34px;
               height: 34px;
               border-radius: 50%;
               cursor: pointer;

               .pop-up {
                  position: absolute;
                  // left: 10px;
                  bottom: 50px;
                  left: 50%;
                  transform: translate(-50%, 0);
                  background: rgba(115, 103, 240, 0.9);
                  width: 250px;
                  padding: 8px 10px;
                  border-radius: 5px;
                  font-size: 14px;
                  color: #fff;
                  z-index: 9999;
                  // user-select:none;
                  opacity: 0;
                  visibility: hidden;
                  transition: all 0.2s ease-in;
                  cursor: text;

                  &:after {
                     content: "";
                     border: 8px solid transparent;
                     border-top-color: rgba(115, 103, 240, 0.9);
                     position: absolute;
                     bottom: -15px;
                     left: 50%;
                     transform: translate(-50%, 0);
                  }
               }

               &:hover .pop-up {
                  opacity: 1;
                  visibility: visible;
               }
            }

            .hon {
               color: #f84242;
            }

            .lixian {
               color: #90a4ae;
            }
         }
      }
   }

   .floor {
      .width(180);
   }

}


.fontSize (@px, @attr: font-size) {
   @vw: (@px / 1920) * 100;
   @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
   @vh: (@px / 1080) * 100;
   @{attr}:~"@{vh}vh";
}

.width (@px, @attr: width) {
   @vw: (@px / 1920) * 100;
   @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
   @vh: (@px / 1080) * 100;
   @{attr}:~"@{vh}vh";
}

.marginTop (@px, @attr: margin-top) {
   @vh: (@px / 1080) * 100;
   @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
   @vh: (@px / 1080) * 100;
   @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
   @vw: (@px / 1920) * 100;
   @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
   @vw: (@px / 1920) * 100;
   @{attr}:~"@{vw}vw";
}

.top (@px, @attr: top) {
   @vh: (@px / 1080) * 100;
   @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
   @vw: (@px / 1920) * 100;
   @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
   @vw: (@px / 1920) * 100;
   @{attr}:~"@{vw}vw";
}

// 上传平面图
.upload-demo {
   text-align: center;
}

::v-deep .el-upload-dragger {
   background: #0D2A8C;
   border: 1px dashed #01EAFC;
}

.el-upload-dragger .el-icon-upload {
   color: #01EAFC;
}

.el-upload-dragger .el-upload__text {
   color: #ffffff;
}

.el-upload-dragger .el-upload__text em {
   color: #01EAFC;
}
</style>